<template>
    <div class="home-basic">
        <div class="home-basic-main" v-for="(item, index) in basicData" :key="index">
            <p class="font-family-harmonyOS fontw700" style="font-family: 700;">{{ item.name }}</p>
            <p class="font-family-harmonyOS">{{ item.title }}</p>
            <div class="flex home-basic-main-bottom">
                <span>{{ item.number || '0' }}</span>
                <img :src="item.imageUrl" alt="" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        },
    },
})
const basicData: any = props.data
</script>

<style lang="less" scoped>
.home-basic {
    display: grid;
    grid-template-columns: repeat(4, 24%);
    gap: 1%;
    margin-bottom: 20px;
    .home-basic-main {
        padding: 17px 24px 17px 28px;
        background-color: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.06);
        p {
            font-size: 14px;
            font-weight: 400;
            color: #3D3D3D;
            line-height: 16px;
        }
        .fontw700{
            font-weight: 700;
            margin-bottom: 16px;
        }
        .home-basic-main-bottom {
            display: flex;
            justify-content: space-between;

            span {
                font-size: 36px;
                font-family: 'HarmonyOS Sans SC-Bold, HarmonyOS Sans SC';
                font-weight: 700;
                color: #1C53D9;
                line-height: 42px;
            }
        }
    }

}
</style>